d<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <!-- <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column> -->
    <el-table-column property="incomeId" label="收入序号" />
    <el-table-column property="ReceiptNumber" label="收入单号" />
    <el-table-column property="IncomeTheme" label="收入主题" />
    <el-table-column property="IncomeTypeName" label="收入类型" />
    <el-table-column property="IncomeDate" label="收入日期">
      <template #default="scope">{{
        scope.row.IncomeDate.substr(0, 10)
      }}</template>
    </el-table-column>
    <el-table-column property="IncomePrice" label="收入金额" />
    <el-table-column property="Remark" label="备注" />
    <el-table-column property="Payer" label="付款方" />
    <el-table-column property="DepositBank" label="开户银行" />
    <el-table-column property="AccountTitle" label="账户名称" />
    <el-table-column property="BankAccount" label="账号" />
    <el-table-column property="NetworkName" label="网点名称" />
    <el-table-column property="IncomeStatementImage" label="附件">
      <template #default="scope">
        <img
          :src="scope.row.IncomeStatementImage"
          style="width: 100px; height: 100px"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button type="warning" @click="EditInfo(scope.row.incomeId)"
          >详情</el-button
        >
        <el-button type="danger" @click="DeleteInfo(scope.row.incomeId)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    v-model:current-page="PageIndex"
    v-model:page-size="PageSize"
    :page-sizes="[5, 10, 20, 100]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="TotalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ElTable } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElUpload } from "element-plus";
import axios from "axios";
import { UploadFilled } from "@element-plus/icons-vue";
import { Plus } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import type { UploadProps } from "element-plus";
const PageSize = ref(5);
const PageIndex = ref(1);
const TotalCount = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const router = useRouter();

const handleSizeChange = (val: number) => {
  PageSize.value = val;
  GetIncomect();
};
const handleCurrentChange = (val: number) => {
  PageIndex.value = val;
  GetIncomect();
};
interface User {
  incomeId: string;
  ReceiptNumber: string;
  IncomeTheme: string;
  IncomeTypeName: string;
  IncomeDate: string;
  IncomePrice: string;
  Remark: string;
  Payer: string;
  DepositBank: string;
  AccountTitle: string;
  BankAccount: string;
  NetworkNamew: string;
  IncomeStatementImage: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData = ref([]);
const GetIncomect = () => {
  axios
    .get("InconeStatementDTO/GetIncomeStatement", {
      params: {
        PageSize: PageSize.value,
        PageIndex: PageIndex.value,
      },
    })
    .then((res) => {
      tableData.value = res.data.Data;
      TotalCount.value = res.data.TotalCount;
    });
};
const DeleteInfo = (incomeId: string) => {
  axios
    .delete(`InconeStatementDTO/DeleteIncomeStatement?incomeId=${incomeId}`)
    .then((res) => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message);
        GetIncomect();
      }
    });
};
const EditInfo = (incomeId: string) => {
  router.push(`/UserList/EditIncome?incomeId=${incomeId}`);
};
GetIncomect();
</script>

